<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar
            fixed
            title="图片列表"
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
        />

        <!-- tab 分类标签栏 -->
        <div class="warp">
        <div class="list">
            <van-sticky :offset-top="46">
                <van-tabs type="line" @click="tabsClick">
                    <van-tab :title="item.title" v-for="item in cateList" :key="item.id"></van-tab>               
                </van-tabs>
            </van-sticky>
        </div>

        <!-- 图片分享栏 -->
        <div class="imglist" v-for="item in imageList" :key="item.id" @click="imgClick(item.id)">
            <img :src="item.img_url" alt="">
            <div class="desc">
                <h3>{{ item.title }}</h3>
                <p>
                    {{ item.zhaiyao }}
                </p>
            </div>
        </div>   
    </div>    
    </div>
</template>

<script>
export default{
    data(){
        return{
             cateList:[],
             imageList:[]
        }
    },
    methods:{
        imgClick(imgid){
            this.$router.push({name:'imageinfo',params:{imgid}});
        },
       getcateList(){
        this.$http.get('http://210.21.98.31:6007/api/getimgcategory')
        .then(res=>{
            let arr = res.data.message;
            // 在arr数组的头部添加一个对象，格式是：
            /*
              {
                title:'全部',
                id:0
              }
            */ 
           arr.unshift( {
                title:'全部',
                id:0
              })
            this.cateList = arr;
        })
       } ,
       tabsClick(tabIndex) {
        this.getImageList(tabIndex)
       },
       getImageList(tabIndex){
         // tabIndex 参数表示tab栏的每一个item的索引值
         let cateObj = this.cateList && this.cateList.length>0 && this.cateList[tabIndex];
        let cateId = cateObj? cateObj.id:0;

       // 发送ajax请求去获取到当前分类下面的所有图片信息
        this.$http.get('http://210.21.98.31:6007/api/getimages/'+cateId)
        .then(res=>{
            this.imageList = res.data.message;
        })
       }
    },
    mounted(){
        this.getcateList();
        this.getImageList(0);
    }
}
</script>

<style>
.warp{
    margin-top: 46px;
}
.van-tabs__nav--card{
    margin: 0px 0px !important
}

.imglist {
    position: relative;
}

.imglist img{
    width: 100%;
    height: 280px;
}

.imglist .desc{
    position:absolute;
    left: 0;
    bottom: 5px;
    padding: 5px;
    color:#fff;
    font-size: 14px;    
}

.imglist p{
    width: 100%;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

</style>